<template>
  <v-app v-scroll="onScroll">
    <v-app-bar app elevate-on-scroll>
      <v-app-bar-nav-icon class="hidden-md-and-up" @click="drawer = !drawer" />
      <v-container class="mx-auto py-0">
        <v-row align="center">
          <v-img
            :src="require('@/static/icon.png')"
            class="mr-5"
            contain
            height="48"
            width="48"
            max-width="48"
            @click="$router.push('/')"
          />
          <v-btn
            v-for="(item, index) in navMenu"
            :key="index"
            class="hidden-sm-and-down"
            :to="item.url"
            text
            @click="onClick(item)"
          >
            {{ item.text }}
          </v-btn>
          <v-spacer />

          <v-text-field
            append-icon="mdi-magnify"
            flat
            hide-details
            solo-inverted
            style="max-width: 300px;"
          />
        </v-row>
      </v-container>
    </v-app-bar>
    <v-content>
      <v-container>
        <!-- <v-btn depressed small color="error" @click="changeBg">切换颜色</v-btn> -->
        <v-fab-transition>
          <v-btn
            v-if="isHideBackup"
            color="pink"
            dark
            large
            fixed
            bottom
            right
            fab
            @click="$vuetify.goTo(0, options)"
          >
            <v-icon>mdi-chevron-up</v-icon>
          </v-btn>
        </v-fab-transition>
        <nuxt />
      </v-container>
    </v-content>
    <v-footer>
      <span>&copy; {{ new Date().getFullYear() }}</span>
    </v-footer>
    <v-navigation-drawer
      v-model="drawer"
      app
      temporary
      src="https://pic.downk.cc/item/5d662e33451253d178f7b945.jpg"
    >
      <v-list>
        <v-list-item
          v-for="(item, index) in navMenu"
          :key="index"
          @click="onClick(item)"
        >
          <v-list-item-title v-text="item.text" />
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      navMenu: [
        {
          text: 'Home',
          url: '/'
        },
        {
          text: 'TRAVEL',
          url: 'travel'
        },
        {
          text: 'MUSIC',
          url: 'music'
        },
        {
          text: 'COOKING',
          url: '#!'
        },
        {
          text: 'SOURCE',
          url: '#!'
        },
        {
          text: 'About',
          url: '#about'
        }
      ],
      right: true,
      isHideBackup: false
    }
  },
  computed: {
    options() {
      return {
        duration: 500,
        easing: 'easeInOutCubic'
      }
    }
  },
  mounted() {
    this.onScroll()
  },
  methods: {
    changeBg() {
      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
    },
    onClick(link) {
      console.log('onClick -> val, link', link)
    },
    onScroll() {
      this.isHideBackup =
        window.pageYOffset || document.documentElement.scrollTop >= 80
    }
  }
}
</script>
